<!doctype html>
<html>
    
    <head>
        <script src="src/default-katavorio-helper.js"></script>
        <script src="src/katavorio.js"></script>
        <style>            
        
            .katavorio-drag-no-select * {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;    
            }
        
            .w {
                position:absolute;width:50px;height:50px;border:1px solid black;
                font-size:12px;
                border-radius:5px;
                text-align:center;
                background-color:WhiteSmoke;
                opacity:0.7;
            }

            .withhandle {
                position:absolute;width:70px;height:50px;border:1px solid black;
                font-size:12px;
                border-radius:5px;
                text-align:center;
                background-color:WhiteSmoke;
                opacity:0.7;
            }

            .handle {
                background-color:darkcyan;
                color:white;
            }
            
            #parentConstrain, #grid {
                width:700px;
                height:500px;                
                position:relative;
                text-align:center;                
                -webkit-transform-origin:0% 0% 0;
                transform-origin:0% 0% 0;
                -moz-transform-origin:0% 0% 0;
                -ms-transform-origin:0% 0% 0;
            }
            
            #one, #twenty { top:50px;left:50px; }
            #two, #twelve, #twentyone { top:350px;left:350px; }
            #three, #thirteen, #twentytwo { top:50px; left:300px; }
            #four, #fourteen { top: 300px; left:70px; }
            #five { top:420px; left:250px; }
            #six { top:250px; left:450px; }
            #seven { left:720px; top:0px;}
            #eight { left:790px; top:60px;}
            #nine { left:920px; top:10px;}
            #ten { left:820px; top:200px;}
            #eleven { top:150px;left:150px; }

            #fourhundred {
                left:600px;
                top:150px;
            }

            .filt {
                width:10px; height:10px;
                background-color:blue;
                cursor:pointer;
            }
            
            .katavorio-drag-selected {
                background-color:yellow;
            }
            
            .katavorio-drag-select {
                border:2px solid blue;
            }
            
            .katavorio-draggable:after {
                content:"\A DRAG"
            }
            
            .katavorio-droppable:after {
                content:"\A DROP"
            }
            
            .katavorio-draggable.katavorio-droppable:after {
                 content:"\A DRAG \A DROP"
            }
            
            .katavorio-drag {
                background-color:#999;
                color:pink;
            }
            .katavorio-drag-active {
                border:3px solid green;
            }
            .katavorio-drag-hover {
                background:#E77;
                color:whitesmoke
            }
            
            #parentConstrain p {                
                font-size:70px;
                color:#CCC;                                           
            }
            
            .c {
                border:2px solid #749957; 
                text-transform:uppercase;
                font-family:Verdana;     
                border-radius:7px;
                margin-bottom:10px;
            }

            #selectParent {
                width:90px;
                height:90px;
            }
        </style>
    </head>
    <body onload="init();">
    
        <div id="zoom" class="c">
        zoom:
            <label><input type="radio" value="25" name="zoom">25%</label>
            <label><input type="radio" value="50" name="zoom">50%</label>
            <label><input type="radio" value="75" name="zoom">75%</label>
            <label><input type="radio" value="100" checked name="zoom">100%</label>
            <label><input type="radio" value="150" name="zoom">150%</label>
        </div>
        
        <div class="c">
            <label><input type="checkbox" id="chkDrop" checked>drop enabled</label>
            <label><input type="checkbox" id="chkDrag" checked>drag enabled</label>
        </div>
        
        <div id="parentConstrain" class="c">
            <p>these elements are constrained to their parent</p>
            <div class="w" id="one" scope="FOO BAR" drag constrain>FOO BAR</div>
            <div class="w" id="two" scope="BAR BAZ" drop>BAR BAZ</div>
            <div class="w" id="three" scope="BAZ" drop drag constrain>BAZ</div>
            <div class="w" id="four" scope="BAZ" drag constrain>BAZ</div>
            <div class="w" id="five" scope="FOO BAR BAZ" drag constrain>FOO BAR BAZ</div>
            <div class="w" id="six" scope="FOO" drop>FOO</div>
            <div class="w" id="eleven" scope="FOO" drag drop constrain filter=".filt">
                FILTER FOO
                <div class="filt"></div>
            </div>
			<div class="w" id="twelve" scope="BAR" drag constrain>
				FILTER BAR
				<div class="filt"></div>
			</div>

            <div id="selectParent" class="w" drag constrain>
                <select multiple>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="opel">Opel</option>
                    <option value="audi">Audi</option>
                </select>
                <br/>
                <select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="opel">Opel</option>
                    <option value="audi">Audi</option>
                </select>
            </div>
            
       </div>
    
        <div class="w free" id="seven" scope="FOO QUX" drag>FOO QUX</div>
        <div class="w free" id="eight" scope="QUX" drop>QUX</div>
        <div class="w free" id="nine" scope="POO QUX" drag>POO QUX</div>
        <div class="w free" id="ten" scope="POO" drop constrain=".idontexist">POO</div>

        <div class="w free withhandle" id="fourhundred" drag filter=".handle" filterExclude="false">
            <div class="handle">handle</div>
        </div>

        <button id="btnSnap" onclick="k.snapToGrid();">SNAP</button>
        <button id="btnSnap100" onclick="k.snapToGrid(100,100);">SNAP 100x100</button>
        <div id="grid" class="c" style="overflow:auto;">
            <p>these elements are constrained and are on a 30x30 grid</p>
            <div class="w" id="twenty" scope="FOO BAR" drag grid="30,30" scroll>FOO BAR</div>
            <div class="w" id="twentyone" scope="BAR BAZ" drop grid="30,30">BAR BAZ</div>
            <div class="w" id="twentytwo" scope="BAZ" drop drag constrain grid="30,30">BAZ</div>
         </div>
    
        <script>
            function init() {
                
                var seh = new DefaultKatavorioHelper();
                
                //setup disable/enable drop
                var chkDrop = document.getElementById("chkDrop"), canDrop = true;
                var chkDrag = document.getElementById("chkDrag"), canDrag = true;
                seh.addEvent(chkDrop, "change", function() {
                    canDrop = chkDrop.checked;
                });
                var canDropCb = function() {
                    return canDrop;
                };
                
                seh.addEvent(chkDrag, "change", function() {
                    canDrag = chkDrag.checked;
                });
                var beforeCanDrag = function() {
                    return canDrag;
                };
                
                                
                var k = window.k = new Katavorio({
                    getPosition:seh.getPosition,
                    setPosition:seh.setPosition,
                    getSize:seh.getSize,
                    addClass:seh.addClass,
                    removeClass:seh.removeClass,
                    bind:seh.addEvent,
                    unbind:seh.removeEvent,
                    fireEvent:function() { 
                        console.log(arguments); 
                    },
                    intersects:seh.intersects,
                    indexOf:seh.indexOf
                });
              
                // setup demo elements for drag and/or drop
                var w = document.querySelectorAll(".w");
                for (var i = 0; i < w.length; i++) {
                    var scope = w[i].getAttribute("scope");
                    if (w[i].getAttribute("drag") != null) {
                        var fe = w[i].getAttribute("filterExclude");
                        k.draggable(w[i], {
                            scope:scope, 
                            constrain:w[i].getAttribute("constrain") != null,
                            canDrag:beforeCanDrag,
                            drag:function() {
                                console.log("DRAG");
                                console.dir(arguments);
                            },
                            filter:w[i].getAttribute("filter"),
                            grid :w[i].getAttribute("grid") ? w[i].getAttribute("grid").split(/,/) : null,
                            scroll:true,//w[i].getAttribute("scroll"),
                            filterExclude: fe == null ? null : fe !== "false"
                        });
                    }
					if (w[i].getAttribute("id") === "twelve") {
						w[i]._katavorioDrag.setFilter( function (event, element) {
							return event.target.classList.contains("filt");
						});
					}
                    if (w[i].getAttribute("drop") != null)
                        k.droppable(w[i], {
                            scope:scope, 
                            canDrop:canDropCb,
                            over:function() {
                                console.log("OVER!");
                                console.log(arguments);
                            },
                            out:function() {
                                console.log("OUT!");
                                console.log(arguments);
                            },
                            drop:function() {
                                console.log("DROP!");
                                console.log(arguments);
                            }
                        });
                }

                // elementd with handles
                /*var wh = document.querySelectorAll(".withhandle");
                for(var i = 0; i < wh.length; i++) {

                }*/
                
                // setup zoom
                var j = document.querySelectorAll("input[type='radio']");
                var _f = function(inp) {
                    seh.addEvent(inp, "change", function() {
                        var z = (inp.getAttribute("value") / 100);
                        k.setZoom(z);
                        document.getElementById("parentConstrain").style["transform"] = "scale(" + z + ")";
                        document.getElementById("parentConstrain").style["-webkit-transform"] = "scale(" + z + ")";
                    });
                };
                for (var i = 0; i < j.length; i++) {
                    _f(j[i]);
                }
                                
            }
        </script>
        
    </body>
    
</html>    